<template>
<div class="app-container demochildren-container">
    <section class="page-box">
        <div class="welcome-container">
            <section class="account-stat mar-b-no">
                <div class="flex-row flex-warp flex-justify-b">
                    <div class="inline flex-row ">
                        <el-button style="background:#333" size="small" type="info" icon="el-icon-refresh"></el-button>
                        <el-button size="small" type="success" icon="el-icon-edit-outline">编辑</el-button>
                        <el-button size="small" type="danger" icon="el-icon-delete">删除</el-button>
                        <el-button size="small" type="info" icon="el-icon-setting">更多</el-button>
                    </div>
                    <div class="inline flex-row flex-justify-e flex-align-c">
                        <el-input size="small" placeholder="搜索" style="margin-left:0px;width:350px;"></el-input>
                        <el-button-group style="vertical-align: top;">
                            <el-button size="small" icon="el-icon-tickets"></el-button>
                            <el-button size="small" icon="el-icon-menu"></el-button>
                            <el-button size="small" icon="el-icon-d-caret"></el-button>
                        </el-button-group>
                        <el-button size="small" icon="el-icon-search"></el-button>
                    </div>
                </div>
                <el-tree :data="diyPosterData" show-checkbox :props="{label: 'posterName'}" node-key="category_id" accordion @check="checkChange">
                </el-tree>
                <div class="panel-body pad-no caozuo">
                    <el-container class="table-footer flex-row flex-justify-b flex-align-c">
                        <el-row>
                            <div style="margin-top:20px;">显示第 1 到第 2 条记录，总共 2 条记录</div>
                        </el-row>
                    </el-container>
                </div>
            </section>
        </div>
    </section>
</div>
</template>

<script>
import {
  posterLists
} from '@/api/application'
// import mixins from '@/mixins/mixins'
export default {
  mixins: [],
  name: 'SpikeMarketing',
  components: {
  },
  created() {
    posterLists({ local: '2' }).then((response) => {
      const { data: { data: msgData = [] } } = response
      msgData.data.map(item => {
        if (item.class === 1) {
          this.diyPosterData[0]['children'].push(item)
        } else if (item.class === 4) {
          this.diyPosterData[1]['children'].push(item)
        } else if (item.class === 3) {
          this.diyPosterData[2]['children'].push(item)
        }
      })

      console.log(this.diyPosterData)
    })
  },
  data() {
    return {
      diyPosterData: [{
        posterName: '商品',
        disabled: true,
        children: []
      }, {
        posterName: '拼团',
        disabled: true,
        children: []
      }, {
        posterName: '秒杀',
        disabled: true,
        children: []
      }],
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1'
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    checkChange(check, checkedNodes) {
      console.log(check)
    }
  }
}
</script>

<style lang="scss" scoped>
.spike-marketing {}
</style>
